<template>
  <div class="expense-management">
    <h1>招待费月统计管理</h1>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <label for="year">年份:</label>
      <select id="year" v-model="selectedYear">
        <option value="">请选择年份</option>
        <option value="2024">2024年</option>
        <!-- 更多年份 -->
      </select>
      <label for="month">月份:</label>
      <select id="month" v-model="selectedMonth">
        <option value="">请选择月份</option>
        <option value="01">1月</option>
        <option value="02">2月</option>
        <!-- 更多月份 -->
      </select>
      <button @click="fetchExpenses">查询</button>
    </div>

    <!-- 月统计列表 -->
    <div class="expense-list">
      <div v-for="expense in expenses" :key="expense.id" class="expense-item">
        <div class="item-title">{{ expense.title }}</div>
        <button @click="viewDetails(expense)">查看</button>
        <button @click="settleExpense(expense)">结算</button>
      </div>
    </div>

    <!-- 结算弹窗 -->
    <div v-if="selectedExpense" class="settle-dialog">
      <h2>批量结算</h2>
      <p>您确定要结算以下月份的费用吗？</p>
      <ul>
        <li v-for="expense in selectedExpense" :key="expense.id">{{ expense.month }}</li>
      </ul>
      <button @click="confirmSettle">确定</button>
      <button @click="cancelSettle">取消</button>
    </div>

    <!-- 详细信息页面 -->
    <div v-if="selectedExpenseDetails" class="expense-details">
      <h2>招待费月统计详情</h2>
      <p>月份: {{ selectedExpenseDetails.month }}</p>
      <p>总金额: {{ selectedExpenseDetails.totalAmount }}</p>
      <p>结算状态: {{ selectedExpenseDetails.settled ? '已结算' : '未结算' }}</p>
      <button @click="closeDetails">关闭</button>
    </div>
  </div>
</template>
<script>
import { ref, reactive, computed } from 'vue';

export default {
  name: 'ExpenseManagement',
  setup() {
    const selectedYear = ref('');
    const selectedMonth = ref('');
    const expenses = ref([]);
    const selectedExpense = ref(null);
    const selectedExpenseDetails = ref(null);

    const fetchExpenses = async () => {
      // 模拟获取数据
      expenses.value = await fetchExpenseData(selectedYear.value, selectedMonth.value);
    };

    const viewDetails = (expense) => {
      selectedExpenseDetails.value = expense;
    };

    const settleExpense = (expense) => {
      selectedExpense.value = [expense];  // 存储当前选中的结算项
    };

    const confirmSettle = async () => {
      // 模拟结算操作
      await settleExpenses(selectedExpense.value);
      fetchExpenses();
      selectedExpense.value = null;
    };

    const cancelSettle = () => {
      selectedExpense.value = null;
    };

    const closeDetails = () => {
      selectedExpenseDetails.value = null;
    };

    return {
      selectedYear,
      selectedMonth,
      expenses,
      selectedExpense,
      selectedExpenseDetails,
      fetchExpenses,
      viewDetails,
      settleExpense,
      confirmSettle,
      cancelSettle,
      closeDetails
    };
  }
};

async function fetchExpenseData(year, month) {
  // 模拟API调用
  return [
    { id: 1, month: '2024-01', title: '2024年1月招待费', totalAmount: 10000, settled: false },
    { id: 2, month: '2024-02', title: '2024年2月招待费', totalAmount: 12000, settled: false },
    // 模拟更多数据
  ];
}

async function settleExpenses(expenses) {
  // 模拟API调用
  console.log('Settling expenses:', expenses);
}
</script>
<style scoped>
.expense-management {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h1 {
  text-align: center;
  color: #333;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-bar label {
  margin-right: 10px;
  font-weight: bold;
}

.search-bar select {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 120px;
}

.search-bar button {
  padding: 10px 20px;
  background-color: #5cb85c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-bar button:hover {
  background-color: #4cae4c;
}

.expense-list {
  display: flex;
  flex-direction: column;
}

.expense-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.expense-item button {
  padding: 5px 10px;
  margin-left: 10px;
  background-color: #f0ad4e;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.expense-item button:hover {
  background-color: #ec971f;
}

.settle-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.settle-dialog h2 {
  margin-bottom: 15px;
}

.settle-dialog ul {
  list-style-type: none;
  padding: 0;
}

.settle-dialog li {
  margin-bottom: 10px;
}

.settle-dialog button {
  margin-right: 10px;
}

.expense-details {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.expense-details h2 {
  margin-bottom: 15px;
}

.expense-details p {
  margin-bottom: 10px;
}

.expense-details button {
  padding: 10px 20px;
  background-color: #d9534f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.expense-details button:hover {
  background-color: #c9302c;
}
</style>